/*
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-01 09:43:46
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-02 14:49:32
 * @FilePath: \app\src\page\Home\Home.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react'
import { Row, Col, Typography } from 'antd'
import { Header, MyMenu, Carousel ,ProductAll} from '../../components'
import styles from './Home.module.css'
// 引入数据
import { productList1, productList2, productList3 } from '../../mockup'
// 引入商品图片
import sider1 from '../../assets/ProductAll/sider_2019_12-09.png'
import sider2 from '../../assets/ProductAll/sider_2019_02-04.png'
import sider3 from '../../assets/ProductAll/sider_2019_02-04.png'

// 引入i18n
import { withTranslation, WithTranslation } from 'react-i18next'


const HomeComponent: React.FC<WithTranslation>=({ t })=> {
    // const { t }=withTranslation()
  return (
    <div>
          {/* 头部 */}
          <Header />
            
         
          {/* 内容区 */}
          < div className={styles['page-content']} >
              <Row style={{ paddingTop: 20 }}>
                  {/* 左侧菜单 */}
                  <Col span={6} >
                      <MyMenu ></MyMenu>
                  </Col>
                  {/* 轮播图 */}
                  <Col span={18} style={{ paddingLeft: 20 }}>
                      <Carousel />
                  </Col>
              </Row>
                
              {/*商品  */}
              <ProductAll 
              imgSrc={sider1}
                  title={<Typography.Title type="warning" level={2} >{t('hotRecommend')}</Typography.Title>}
              arrList={productList1}
              />

              <ProductAll
                  imgSrc={sider2}
                  title={<Typography.Title type="danger" level={2} >{t('newProducts')}</Typography.Title>}
                  arrList={productList2}
              />

              <ProductAll
                  imgSrc={sider3}
                  title={<Typography.Title type="success" level={2} >{t('travelRecommendation')}</Typography.Title>}
                  arrList={productList3}
              />
          </div >
       
    </div>
  )
}

export const Home = withTranslation()(HomeComponent);